<template>
  <div id="leftBox" >
      <ul class="left_nav">
          <li>首页</li>
          <li @click="dianji" >文本工具
              <div  :style="{height:height + 'px'}">
                  <li>英文字母大小写转换</li>
                  <li>文本去重工具</li>
                  <li>文本替换工具</li>
                  <li>文本反转排序工具</li>
                  <li>文本增加序号工具</li>
                  <li>OCR图片识别文字工具</li>
                  <li>特殊符号大全</li>
                  <li>花体英文转换器</li>
                  <li>字数统计工具</li>
              </div>
          </li>
          <li>语言工具</li>
          <li>转换工具</li>
          <li>日期时间</li>
          <li>便民查询</li>
          <li>开发工具</li>
          <li>编码加密</li>
          <li>站长工具</li>
      </ul>
  </div>
</template>

<script>

export default {
    data(){
        return{
            height:0
        }
    },
    methods:{
        dianji(){
            this.height = this.height == 288? 0 :288;
        }
    }
}

</script>



<style lang="scss">
    .hide{
        display: none;
    }
    #leftBox{
        width: 217px;
        height: 367px;
        // border: 1px solid red;
        margin: 0 auto;
        text-align: center;
        >.left_nav{
        color: #B8B8B8;
        list-style: none;
        
        >li{
            margin-top:10px ;
            cursor: pointer;
        }
      
        >li:nth-of-type(1){
            color:#4CAF50 ;
        }
        >li:nth-of-type(2){
            position: relative;
            >div{
                width: 217px;
                height: 0px;
                border-top: 1px solid #333333;
                border-bottom: 1px solid #333333;
                margin-left:-40px ;
                background: #222222;
                text-align: center;
                overflow: hidden;
                transition:all 1s;
                >li{
                    margin-top: 13px;
                    font-size:14.4px ;
                    margin-left:40px ;
                }
                >li:hover{
                    color: #4CAF50;
                }
            }
        }
    }
    }
    
</style>